@import 'variables';

:root, [data-bs-theme=light] {
  --bs-primary: #{$primary};
  --bs-primary-rgb: #{$primary-rgb};
  --bs-danger: #{$danger};
  --bs-danger-rgb: #{$danger-rgb};
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #{lighten($primary, 10%)};
  --bs-btn-hover-border-color: #{lighten($primary, 10%)};
  --bs-btn-active-bg: #{darken($primary, 10%)};
  --bs-btn-active-border-color: #{darken($primary, 10%)};
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #{lighten($primary, 10%)};
  --bs-btn-hover-border-color: #{lighten($primary, 10%)};
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

.btn-check:not(:checked) + .btn-outline-primary {
  --bs-btn-bg: var(--bs-gray-100);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
}

.nav-pills-primary {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-border-width: 1px;
  --bs-nav-link-border-color: var(--bs-border-color);
  --bs-nav-link-hover-bg: var(--bs-primary);
  --bs-nav-link-hover-color: #fff;
  --bs-nav-link-hover-border-color: var(--bs-primary);
  --bs-nav-link-active-border-color: var(--bs-primary);
  --bs-nav-pills-link-bg: var(--bs-gray-100);
  --bs-nav-pills-link-active-bg: var(--bs-primary);

  .nav-link {
    background-color: var(--bs-nav-pills-link-bg);
    border: var(--bs-nav-link-border-width) solid var(--bs-nav-link-border-color);

    &:hover {
      border-color: var(--bs-nav-link-hover-border-color);
      background-color: var(--bs-nav-link-hover-bg);
    }

    &.active {
      border-color: var(--bs-nav-link-active-border-color);
    }
  }
}
